<template>
  <div class="setting">
    <h1>设置</h1>
    <el-tabs tab-position="left">
      <el-tab-pane label="个人资料" class="content">
        <Personal-data></Personal-data>
      </el-tab-pane>
      <el-tab-pane label="更改密码" class="content">
        <Password></Password>
      </el-tab-pane>
      <el-tab-pane label="账号和安全" class="content">
        <el-button type="danger" :icon="Delete" @click="cancelAccount">注销账号</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
/**
 * Setting.vue - 设置页面主组件
 * 包含个人资料、更改密码和账号安全三个功能模块
 */


import { computed } from "vue";
import { Delete } from "@element-plus/icons-vue";
import PersonalData from "./PersonalData.vue"; // 个人资料组件
import Password from "./Password.vue"; // 更改密码组件
// 导入API管理模块
import { HttpManager } from "@/api"; // HTTP请求管理类
// 导入Vuex状态管理
import { useStore } from "vuex";
// 导入混合器
import mixin from "@/mixins/mixin";
// 导入路由名称枚举
import { RouterName } from "@/enums";
import { ElMessage } from "element-plus"

// 创建Vuex store实例
const store = useStore();

// 解构混合器中的路由管理函数
const { routerManager } = mixin();

/**
 * 计算属性：用户ID
 * 从Vuex store的getters中获取当前用户的ID
 */
const userId = computed(() => store.getters.userId);

/**
 * 注销账号函数
 * 异步函数，调用API删除用户账号并处理后续操作
 */
async function cancelAccount() {
  // 调用API删除用户账号，返回结果转换为ResponseBody类型
  const result = (await HttpManager.deleteUser(userId.value)) as ResponseBody;
  
  // 显示操作结果提示信息
  ElMessage({
    message: result.message, // 提示消息内容
    type: result.type as any, // 消息类型（成功/错误等）
  });
  
  // 跳转到登录页面
  routerManager(RouterName.SignIn, { path: RouterName.SignIn });
  
  // 清除用户登录状态
  store.commit("setToken", false);
}
</script>

<style lang="scss" scoped>
// 使用Sass 3.0新模块系统导入
@use "@/assets/css/var" as *;
@use "@/assets/css/global";

h1 {
  border-bottom: 1px solid $color-grey;
}

.content {
  padding-top: 20px;
  text-align: center;
}

@media screen and (min-width: $sm) {
  .setting {
    margin: 30px 10%;
    margin-top: 0;
    padding: 20px;
    min-height: 60vh;
  }
}

@media screen and (max-width: $sm) {
  .setting {
    padding: 20px;
  }
}
</style>
